<script>
export default {
  name:'About',
  methods:{
    handleClick(){
      //灵活，为登录返回登录页
      this.$router.push('/about/bar');
    }
  }
}

</script>

<template>
  <div>About.vue</div>
  <router-link to="/about/foo/123">foo 123</router-link> |
  <router-link to="/about/foo/456">foo 456</router-link> |

  <!--  自定义路由-->
  <router-link to="/about/foo/123" custom v-slot="{navigate}">
    <button @click="navigate">foo 123 button</button>
  </router-link> |
  <router-link to="/about/foo/456"  custom v-slot="{navigate}">
    <button @click="navigate">foo 456 button</button>
  </router-link> |

  <button @click="handleClick">编程式路由模式Bar</button>
  <router-view></router-view>
</template>

<style scoped>

</style>